<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兴趣社交 - 发现群组</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #f0f4ff;
            --secondary: #64748b;
            --light: #f8fafc;
            --dark: #1e293b;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --border: #e2e8f0;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f1f5f9;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            box-shadow: var(--shadow);
            background-color: white;
        }
        
        .container {
            padding: 1.5rem 0;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background-color: var(--primary);
        }
        
        /* 筛选区域样式 */
        .filter-section {
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .filter-row {
            margin-bottom: 1.25rem;
        }
        
        .filter-label {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            font-size: 0.9rem;
        }
        
        .search-box i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .filter-tag {
            background-color: var(--light);
            color: var(--secondary);
            padding: 0.375rem 0.875rem;
            border-radius: 999px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        
        .filter-tag:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .filter-tag.active {
            background-color: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary);
        }
        
        /* 排序和视图切换 */
        .sort-view-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .sort-controls select {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            border: 1px solid var(--border);
            background-color: white;
        }
        
        .view-controls {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            width: 36px;
            height: 36px;
            border-radius: 0.5rem;
            border: 1px solid var(--border);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 群组卡片样式 - 网格视图 */
        .group-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .group-card {
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .group-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .group-card-banner {
            height: 140px;
            position: relative;
            overflow: hidden;
        }
        
        .group-card-banner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .group-card:hover .group-card-banner img {
            transform: scale(1.05);
        }
        
        .group-card-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 3px solid white;
            position: absolute;
            bottom: -35px;
            left: 1.25rem;
            overflow: hidden;
        }
        
        .group-card-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .group-card-content {
            padding: 45px 1.25rem 1.25rem;
        }
        
        .group-card-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .group-card-desc {
            font-size: 0.85rem;
            color: var(--secondary);
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }
        
        .group-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .group-card-tag {
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.25rem 0.625rem;
            border-radius: 999px;
            font-size: 0.75rem;
        }
        
        .group-card-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--secondary);
            border-top: 1px solid var(--border);
            padding-top: 0.75rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .group-card-join {
            margin-top: 1rem;
            width: 100%;
            padding: 0.5rem;
            border-radius: 0.5rem;
            background-color: var(--primary);
            color: white;
            border: none;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        
        .group-card-join:hover {
            background-color: #4338ca;
        }
        
        .group-card-join.joined {
            background-color: var(--success);
        }
        
        /* 列表视图样式 */
        .group-list {
            display: none;
        }
        
        .group-list-item {
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 1rem;
            display: flex;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .group-list-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }
        
        .group-list-media {
            width: 140px;
            flex-shrink: 0;
            position: relative;
        }
        
        .group-list-banner {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .group-list-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid white;
            position: absolute;
            bottom: 1rem;
            left: 1rem;
            overflow: hidden;
        }
        
        .group-list-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .group-list-content {
            flex: 1;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
        }
        
        .group-list-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }
        
        .group-list-title {
            font-weight: 600;
            font-size: 1.25rem;
        }
        
        .group-list-join {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            background-color: var(--primary);
            color: white;
            border: none;
            font-weight: 500;
            transition: background-color 0.2s;
            white-space: nowrap;
        }
        
        .group-list-join:hover {
            background-color: #4338ca;
        }
        
        .group-list-join.joined {
            background-color: var(--success);
        }
        
        .group-list-desc {
            font-size: 0.9rem;
            color: var(--secondary);
            margin-bottom: 1rem;
            flex: 1;
        }
        
        .group-list-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .group-list-tag {
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.25rem 0.625rem;
            border-radius: 999px;
            font-size: 0.75rem;
        }
        
        .group-list-meta {
            display: flex;
            gap: 1.5rem;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        /* 活跃群组样式 */
        .active-groups {
            margin-top: 3rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .filter-row {
                margin-bottom: 1rem;
            }
            
            .sort-view-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .group-list-item {
                flex-direction: column;
            }
            
            .group-list-media {
                width: 100%;
                height: 120px;
            }
        }
        
        /* 视图切换 */
        .view-active.grid-view .group-grid {
            display: grid;
        }
        
        .view-active.grid-view .group-list {
            display: none;
        }
        
        .view-active.list-view .group-grid {
            display: none;
        }
        
        .view-active.list-view .group-list {
            display: block;
        }
        

        
        /* 筛选器折叠按钮 */
        .filter-toggle {
            display: none;
            width: 100%;
            padding: 0.75rem;
            background-color: white;
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: 500;
            cursor: pointer;
        }
        
        @media (max-width: 768px) {
            .filter-toggle {
                display: block;
            }
            
            .filter-content {
                display: none;
            }
            
            .filter-content.show {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-users text-primary me-2"></i>兴趣社交
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">兴趣测试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">群组</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">社区</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-outline-primary">登录</button>
                    <button class="btn btn-primary">注册</button>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容区 -->
    <div class="container">
        <h1 class="section-title">发现群组</h1>
        
        <!-- 筛选器折叠按钮（移动端） -->
        <div class="filter-toggle" id="filterToggle">
            <i class="fas fa-filter me-2"></i>筛选条件
            <i class="fas fa-chevron-down ms-2" id="filterChevron"></i>
        </div>
        
        <!-- 筛选区域 -->
        <div class="filter-section filter-content" id="filterContent">
            <div class="row">
                <!-- 搜索框 -->
                <div class="col-md-4 filter-row">
                    <div class="filter-label">搜索群组</div>
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="输入群组名称或关键词..." id="groupSearch">
                    </div>
                </div>
                
                <!-- 分类筛选 -->
                <div class="col-md-4 filter-row">
                    <div class="filter-label">群组分类</div>
                    <div class="filter-tags" id="categoryFilter">
                        <div class="filter-tag active" data-category="all">全部</div>
                        <div class="filter-tag" data-category="photography">摄影</div>
                        <div class="filter-tag" data-category="music">音乐</div>
                        <div class="filter-tag" data-category="sports">运动</div>
                        <div class="filter-tag" data-category="reading">阅读</div>
                        <div class="filter-tag" data-category="travel">旅行</div>
                        <div class="filter-tag" data-category="food">美食</div>
                    </div>
                </div>
                
                <!-- 成员数量筛选 -->
                <div class="col-md-4 filter-row">
                    <div class="filter-label">成员数量</div>
                    <div class="filter-tags" id="memberCountFilter">
                        <div class="filter-tag active" data-members="all">全部</div>
                        <div class="filter-tag" data-members="small">500人以下</div>
                        <div class="filter-tag" data-members="medium">500-2000人</div>
                        <div class="filter-tag" data-members="large">2000人以上</div>
                    </div>
                </div>
                
                <!-- 活跃度筛选 -->
                <div class="col-md-4 filter-row">
                    <div class="filter-label">活跃度</div>
                    <div class="filter-tags" id="activityFilter">
                        <div class="filter-tag active" data-activity="all">全部</div>
                        <div class="filter-tag" data-activity="high">高活跃</div>
                        <div class="filter-tag" data-activity="medium">中等活跃</div>
                        <div class="filter-tag" data-activity="low">低活跃</div>
                    </div>
                </div>
                
                <!-- 创建时间筛选 -->
                <div class="col-md-4 filter-row">
                    <div class="filter-label">创建时间</div>
                    <div class="filter-tags" id="creationTimeFilter">
                        <div class="filter-tag active" data-time="all">全部</div>
                        <div class="filter-tag" data-time="week">最近一周</div>
                        <div class="filter-tag" data-time="month">最近一月</div>
                        <div class="filter-tag" data-time="quarter">最近三月</div>
                        <div class="filter-tag" data-time="year">一年以内</div>
                    </div>
                </div>
                
                <!-- 地区筛选 -->
                <div class="col-md-4 filter-row">
                    <div class="filter-label">地区</div>
                    <div class="filter-tags" id="regionFilter">
                        <div class="filter-tag active" data-region="all">全部</div>
                        <div class="filter-tag" data-region="local">本地群组</div>
                        <div class="filter-tag" data-region="national">全国范围</div>
                        <div class="filter-tag" data-region="international">国际群组</div>
                    </div>
                </div>
            </div>
            
            <!-- 筛选操作按钮 -->
            <div class="d-flex justify-content-end gap-2 mt-2">
                <button class="btn btn-outline-primary" id="resetFilters">重置筛选</button>
                <button class="btn btn-primary" id="applyFilters">应用筛选</button>
            </div>
        </div>
        
        <!-- 排序和视图切换 -->
        <div class="sort-view-controls">
            <div class="sort-controls">
                <select id="sortSelect">
                    <option value="recommended">推荐排序</option>
                    <option value="newest">最新创建</option>
                    <option value="mostMembers">成员最多</option>
                    <option value="mostActive">最活跃</option>
                </select>
            </div>
            <div class="view-controls">
                <div class="view-btn active" id="gridViewBtn" title="网格视图">
                    <i class="fas fa-th"></i>
                </div>
                <div class="view-btn" id="listViewBtn" title="列表视图">
                    <i class="fas fa-list"></i>
                </div>
            </div>
        </div>
        
        <!-- 群组列表 - 网格视图 -->
        <div class="group-grid view-active grid-view" id="groupContainer">
            <!-- 群组卡片 1 -->
            <div class="group-card" data-category="photography" data-members="large" data-activity="high" data-time="year" data-region="national">
                <div class="group-card-banner">
                    <img src="https://picsum.photos/400/300?random=10" alt="风光摄影爱好者群组封面">
                    <div class="group-card-avatar">
                        <img src="https://picsum.photos/200/200?random=101" alt="风光摄影爱好者群组头像">
                    </div>
                </div>
                <div class="group-card-content">
                    <h3 class="group-card-title">风光摄影爱好者</h3>
                    <p class="group-card-desc">分享世界各地的风光摄影作品，交流拍摄技巧和经验，一起探索光影的魅力。</p>
                    <div class="group-card-tags">
                        <span class="group-card-tag">摄影</span>
                        <span class="group-card-tag">风光</span>
                        <span class="group-card-tag">户外</span>
                    </div>
                    <div class="group-card-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>2.3k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>高活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>1年前</span>
                        </div>
                    </div>
                    <button class="group-card-join" data-group="photography-1">加入群组</button>
                </div>
            </div>
            
            <!-- 群组卡片 2 -->
            <div class="group-card" data-category="music" data-members="medium" data-activity="high" data-time="month" data-region="national">
                <div class="group-card-banner">
                    <img src="https://picsum.photos/400/300?random=20" alt="独立音乐分享群组封面">
                    <div class="group-card-avatar">
                        <img src="https://picsum.photos/200/200?random=201" alt="独立音乐分享群组头像">
                    </div>
                </div>
                <div class="group-card-content">
                    <h3 class="group-card-title">独立音乐分享</h3>
                    <p class="group-card-desc">发现和分享独立音乐，讨论音乐创作，结识志同道合的音乐爱好者。</p>
                    <div class="group-card-tags">
                        <span class="group-card-tag">音乐</span>
                        <span class="group-card-tag">独立</span>
                        <span class="group-card-tag">创作</span>
                    </div>
                    <div class="group-card-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>1.2k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>高活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>25天前</span>
                        </div>
                    </div>
                    <button class="group-card-join" data-group="music-1">加入群组</button>
                </div>
            </div>
            
            <!-- 群组卡片 3 -->
            <div class="group-card" data-category="sports" data-members="small" data-activity="medium" data-time="week" data-region="local">
                <div class="group-card-banner">
                    <img src="https://picsum.photos/400/300?random=30" alt="城市夜跑团群组封面">
                    <div class="group-card-avatar">
                        <img src="https://picsum.photos/200/200?random=301" alt="城市夜跑团群组头像">
                    </div>
                </div>
                <div class="group-card-content">
                    <h3 class="group-card-title">城市夜跑团</h3>
                    <p class="group-card-desc">每周组织夜跑活动，适合各个水平的跑者，健康生活，从跑步开始。</p>
                    <div class="group-card-tags">
                        <span class="group-card-tag">运动</span>
                        <span class="group-card-tag">跑步</span>
                        <span class="group-card-tag">健康</span>
                    </div>
                    <div class="group-card-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>356 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>中活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>5天前</span>
                        </div>
                    </div>
                    <button class="group-card-join" data-group="sports-1">加入群组</button>
                </div>
            </div>
            
            <!-- 群组卡片 4 -->
            <div class="group-card" data-category="reading" data-members="medium" data-activity="medium" data-time="quarter" data-region="national">
                <div class="group-card-banner">
                    <img src="https://picsum.photos/400/300?random=40" alt="文学爱好者读书会群组封面">
                    <div class="group-card-avatar">
                        <img src="https://picsum.photos/200/200?random=401" alt="文学爱好者读书会群组头像">
                    </div>
                </div>
                <div class="group-card-content">
                    <h3 class="group-card-title">文学爱好者读书会</h3>
                    <p class="group-card-desc">每月精选一本经典文学作品，线上线下同步讨论，分享阅读心得。</p>
                    <div class="group-card-tags">
                        <span class="group-card-tag">阅读</span>
                        <span class="group-card-tag">文学</span>
                        <span class="group-card-tag">分享</span>
                    </div>
                    <div class="group-card-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>876 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>中活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>2个月前</span>
                        </div>
                    </div>
                    <button class="group-card-join" data-group="reading-1">加入群组</button>
                </div>
            </div>
            
            <!-- 群组卡片 5 -->
            <div class="group-card" data-category="travel" data-members="large" data-activity="high" data-time="year" data-region="international">
                <div class="group-card-banner">
                    <img src="https://picsum.photos/400/300?random=50" alt="环球旅行分享群组封面">
                    <div class="group-card-avatar">
                        <img src="https://picsum.photos/200/200?random=501" alt="环球旅行分享群组头像">
                    </div>
                </div>
                <div class="group-card-content">
                    <h3 class="group-card-title">环球旅行分享</h3>
                    <p class="group-card-desc">分享旅行攻略、目的地推荐和旅行故事，寻找旅伴，一起探索世界。</p>
                    <div class="group-card-tags">
                        <span class="group-card-tag">旅行</span>
                        <span class="group-card-tag">攻略</span>
                        <span class="group-card-tag">探索</span>
                    </div>
                    <div class="group-card-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>3.5k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>高活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>10个月前</span>
                        </div>
                    </div>
                    <button class="group-card-join" data-group="travel-1">加入群组</button>
                </div>
            </div>
            
            <!-- 群组卡片 6 -->
            <div class="group-card" data-category="food" data-members="medium" data-activity="high" data-time="month" data-region="local">
                <div class="group-card-banner">
                    <img src="https://picsum.photos/400/300?random=60" alt="城市美食探索群组封面">
                    <div class="group-card-avatar">
                        <img src="https://picsum.photos/200/200?random=601" alt="城市美食探索群组头像">
                    </div>
                </div>
                <div class="group-card-content">
                    <h3 class="group-card-title">城市美食探索</h3>
                    <p class="group-card-desc">发现城市里的隐藏美食，组织美食探店活动，分享美食照片和评价。</p>
                    <div class="group-card-tags">
                        <span class="group-card-tag">美食</span>
                        <span class="group-card-tag">探店</span>
                        <span class="group-card-tag">分享</span>
                    </div>
                    <div class="group-card-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>1.7k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>高活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>1个月前</span>
                        </div>
                    </div>
                    <button class="group-card-join" data-group="food-1">加入群组</button>
                </div>
            </div>
        </div>
        
        <!-- 群组列表 - 列表视图 -->
        <div class="group-list" id="groupList">
            <!-- 群组列表项 1 -->
            <div class="group-list-item" data-category="photography" data-members="large" data-activity="high" data-time="year" data-region="national">
                <div class="group-list-media">
                    <img src="https://picsum.photos/400/300?random=10" alt="风光摄影爱好者群组封面" class="group-list-banner">
                    <div class="group-list-avatar">
                        <img src="https://picsum.photos/200/200?random=101" alt="风光摄影爱好者群组头像">
                    </div>
                </div>
                <div class="group-list-content">
                    <div class="group-list-header">
                        <h3 class="group-list-title">风光摄影爱好者</h3>
                        <button class="group-list-join" data-group="photography-1">加入群组</button>
                    </div>
                    <p class="group-list-desc">分享世界各地的风光摄影作品，交流拍摄技巧和经验，一起探索光影的魅力。无论你是专业摄影师还是摄影爱好者，都能在这里找到志同道合的朋友。</p>
                    <div class="group-list-tags">
                        <span class="group-list-tag">摄影</span>
                        <span class="group-list-tag">风光</span>
                        <span class="group-list-tag">户外</span>
                    </div>
                    <div class="group-list-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>2.3k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>高活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>创建于 1年前</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>全国范围</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 群组列表项 2 -->
            <div class="group-list-item" data-category="music" data-members="medium" data-activity="high" data-time="month" data-region="national">
                <div class="group-list-media">
                    <img src="https://picsum.photos/400/300?random=20" alt="独立音乐分享群组封面" class="group-list-banner">
                    <div class="group-list-avatar">
                        <img src="https://picsum.photos/200/200?random=201" alt="独立音乐分享群组头像">
                    </div>
                </div>
                <div class="group-list-content">
                    <div class="group-list-header">
                        <h3 class="group-list-title">独立音乐分享</h3>
                        <button class="group-list-join" data-group="music-1">加入群组</button>
                    </div>
                    <p class="group-list-desc">发现和分享独立音乐，讨论音乐创作，结识志同道合的音乐爱好者。我们定期举办线上线下演出活动，给独立音乐人提供展示平台。</p>
                    <div class="group-list-tags">
                        <span class="group-list-tag">音乐</span>
                        <span class="group-list-tag">独立</span>
                        <span class="group-list-tag">创作</span>
                    </div>
                    <div class="group-list-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>1.2k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>高活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>创建于 25天前</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>全国范围</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 群组列表项 3 -->
            <div class="group-list-item" data-category="sports" data-members="small" data-activity="medium" data-time="week" data-region="local">
                <div class="group-list-media">
                    <img src="https://picsum.photos/400/300?random=30" alt="城市夜跑团群组封面" class="group-list-banner">
                    <div class="group-list-avatar">
                        <img src="https://picsum.photos/200/200?random=301" alt="城市夜跑团群组头像">
                    </div>
                </div>
                <div class="group-list-content">
                    <div class="group-list-header">
                        <h3 class="group-list-title">城市夜跑团</h3>
                        <button class="group-list-join" data-group="sports-1">加入群组</button>
                    </div>
                    <p class="group-list-desc">每周组织夜跑活动，适合各个水平的跑者，健康生活，从跑步开始。我们有专业教练指导，定期举办小型比赛，让跑步更有乐趣。</p>
                    <div class="group-list-tags">
                        <span class="group-list-tag">运动</span>
                        <span class="group-list-tag">跑步</span>
                        <span class="group-list-tag">健康</span>
                    </div>
                    <div class="group-list-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>356 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>中活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>创建于 5天前</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>本地群组</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 群组列表项 4 -->
            <div class="group-list-item" data-category="reading" data-members="medium" data-activity="medium" data-time="quarter" data-region="national">
                <div class="group-list-media">
                    <img src="https://picsum.photos/400/300?random=40" alt="文学爱好者读书会群组封面" class="group-list-banner">
                    <div class="group-list-avatar">
                        <img src="https://picsum.photos/200/200?random=401" alt="文学爱好者读书会群组头像">
                    </div>
                </div>
                <div class="group-list-content">
                    <div class="group-list-header">
                        <h3 class="group-list-title">文学爱好者读书会</h3>
                        <button class="group-list-join" data-group="reading-1">加入群组</button>
                    </div>
                    <p class="group-list-desc">每月精选一本经典文学作品，线上线下同步讨论，分享阅读心得。我们邀请文学教授和作家参与点评，深入解析作品内涵。</p>
                    <div class="group-list-tags">
                        <span class="group-list-tag">阅读</span>
                        <span class="group-list-tag">文学</span>
                        <span class="group-list-tag">分享</span>
                    </div>
                    <div class="group-list-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>876 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>中活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>创建于 2个月前</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>全国范围</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 群组列表项 5 -->
            <div class="group-list-item" data-category="travel" data-members="large" data-activity="high" data-time="year" data-region="international">
                <div class="group-list-media">
                    <img src="https://picsum.photos/400/300?random=50" alt="环球旅行分享群组封面" class="group-list-banner">
                    <div class="group-list-avatar">
                        <img src="https://picsum.photos/200/200?random=501" alt="环球旅行分享群组头像">
                    </div>
                </div>
                <div class="group-list-content">
                    <div class="group-list-header">
                        <h3 class="group-list-title">环球旅行分享</h3>
                        <button class="group-list-join" data-group="travel-1">加入群组</button>
                    </div>
                    <p class="group-list-desc">分享旅行攻略、目的地推荐和旅行故事，寻找旅伴，一起探索世界。我们与多家旅行社合作，为群成员提供专属旅行优惠。</p>
                    <div class="group-list-tags">
                        <span class="group-list-tag">旅行</span>
                        <span class="group-list-tag">攻略</span>
                        <span class="group-list-tag">探索</span>
                    </div>
                    <div class="group-list-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>3.5k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>高活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>创建于 10个月前</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>国际群组</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 群组列表项 6 -->
            <div class="group-list-item" data-category="food" data-members="medium" data-activity="high" data-time="month" data-region="local">
                <div class="group-list-media">
                    <img src="https://picsum.photos/400/300?random=60" alt="城市美食探索群组封面" class="group-list-banner">
                    <div class="group-list-avatar">
                        <img src="https://picsum.photos/200/200?random=601" alt="城市美食探索群组头像">
                    </div>
                </div>
                <div class="group-list-content">
                    <div class="group-list-header">
                        <h3 class="group-list-title">城市美食探索</h3>
                        <button class="group-list-join" data-group="food-1">加入群组</button>
                    </div>
                    <p class="group-list-desc">发现城市里的隐藏美食，组织美食探店活动，分享美食照片和评价。我们与多家餐厅合作，为群成员提供专属折扣和试吃机会。</p>
                    <div class="group-list-tags">
                        <span class="group-list-tag">美食</span>
                        <span class="group-list-tag">探店</span>
                        <span class="group-list-tag">分享</span>
                    </div>
                    <div class="group-list-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>1.7k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-comment"></i>
                            <span>高活跃</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>创建于 1个月前</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>本地群组</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="text-center mt-4 mb-3">
            <button class="btn btn-outline-primary" id="loadMoreBtn">
                <i class="fas fa-spinner fa-spin me-2" style="display: none;" id="loadMoreSpinner"></i>
                加载更多群组
            </button>
        </div>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 筛选器折叠功能（移动端）
            const filterToggle = document.getElementById('filterToggle');
            const filterContent = document.getElementById('filterContent');
            const filterChevron = document.getElementById('filterChevron');
            
            filterToggle.addEventListener('click', function() {
                filterContent.classList.toggle('show');
                filterChevron.classList.toggle('fa-chevron-down');
                filterChevron.classList.toggle('fa-chevron-up');
            });
            
            // 筛选标签选择功能
            const filterTags = document.querySelectorAll('.filter-tag');
            filterTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    // 移除同组中其他标签的active类
                    const siblings = this.parentElement.querySelectorAll('.filter-tag');
                    siblings.forEach(sibling => sibling.classList.remove('active'));
                    
                    // 给当前标签添加active类
                    this.classList.add('active');
                });
            });
            
            // 视图切换功能
            const gridViewBtn = document.getElementById('gridViewBtn');
            const listViewBtn = document.getElementById('listViewBtn');
            const groupContainer = document.getElementById('groupContainer');
            const groupList = document.getElementById('groupList');
            
            gridViewBtn.addEventListener('click', function() {
                gridViewBtn.classList.add('active');
                listViewBtn.classList.remove('active');
                groupContainer.classList.add('grid-view');
                groupContainer.classList.remove('list-view');
                groupList.classList.remove('grid-view');
                groupList.classList.remove('list-view');
            });
            
            listViewBtn.addEventListener('click', function() {
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
                groupContainer.classList.remove('grid-view');
                groupContainer.classList.add('list-view');
                groupList.classList.add('list-view');
                groupList.classList.remove('grid-view');
            });
            
            // 加入群组按钮功能
            const joinButtons = document.querySelectorAll('.group-card-join, .group-list-join');
            joinButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const groupId = this.getAttribute('data-group');
                    
                    if (this.textContent.includes('加入群组')) {
                        this.textContent = '已加入';
                        this.classList.add('joined');
                        showNotification('成功加入群组');
                        
                        // 这里可以添加AJAX请求，将用户加入群组的信息发送到服务器
                        console.log(`用户加入了群组: ${groupId}`);
                    } else {
                        this.textContent = '加入群组';
                        this.classList.remove('joined');
                        showNotification('已退出群组');
                        
                        // 这里可以添加AJAX请求，将用户退出群组的信息发送到服务器
                        console.log(`用户退出了群组: ${groupId}`);
                    }
                });
            });
            
            // 筛选功能实现
            const applyFiltersBtn = document.getElementById('applyFilters');
            const resetFiltersBtn = document.getElementById('resetFilters');
            const groupSearchInput = document.getElementById('groupSearch');
            
            applyFiltersBtn.addEventListener('click', function() {
                // 获取所有筛选条件
                const selectedCategory = document.querySelector('#categoryFilter .filter-tag.active').getAttribute('data-category');
                const selectedMembers = document.querySelector('#memberCountFilter .filter-tag.active').getAttribute('data-members');
                const selectedActivity = document.querySelector('#activityFilter .filter-tag.active').getAttribute('data-activity');
                const selectedTime = document.querySelector('#creationTimeFilter .filter-tag.active').getAttribute('data-time');
                const selectedRegion = document.querySelector('#regionFilter .filter-tag.active').getAttribute('data-region');
                const searchTerm = groupSearchInput.value.toLowerCase().trim();
                
                // 筛选网格视图中的群组
                const groupCards = document.querySelectorAll('.group-card');
                groupCards.forEach(card => {
                    let showCard = true;
                    
                    // 分类筛选
                    if (selectedCategory !== 'all' && card.getAttribute('data-category') !== selectedCategory) {
                        showCard = false;
                    }
                    
                    // 成员数量筛选
                    if (selectedMembers !== 'all' && card.getAttribute('data-members') !== selectedMembers) {
                        showCard = false;
                    }
                    
                    // 活跃度筛选
                    if (selectedActivity !== 'all' && card.getAttribute('data-activity') !== selectedActivity) {
                        showCard = false;
                    }
                    
                    // 创建时间筛选
                    if (selectedTime !== 'all' && card.getAttribute('data-time') !== selectedTime) {
                        showCard = false;
                    }
                    
                    // 地区筛选
                    if (selectedRegion !== 'all' && card.getAttribute('data-region') !== selectedRegion) {
                        showCard = false;
                    }
                    
                    // 搜索筛选
                    if (searchTerm && !card.querySelector('.group-card-title').textContent.toLowerCase().includes(searchTerm) &&
                        !card.querySelector('.group-card-desc').textContent.toLowerCase().includes(searchTerm)) {
                        showCard = false;
                    }
                    
                    // 显示或隐藏群组卡片
                    card.style.display = showCard ? 'block' : 'none';
                });
                
                // 筛选列表视图中的群组
                const groupListItems = document.querySelectorAll('.group-list-item');
                groupListItems.forEach(item => {
                    let showItem = true;
                    
                    // 分类筛选
                    if (selectedCategory !== 'all' && item.getAttribute('data-category') !== selectedCategory) {
                        showItem = false;
                    }
                    
                    // 成员数量筛选
                    if (selectedMembers !== 'all' && item.getAttribute('data-members') !== selectedMembers) {
                        showItem = false;
                    }
                    
                    // 活跃度筛选
                    if (selectedActivity !== 'all' && item.getAttribute('data-activity') !== selectedActivity) {
                        showItem = false;
                    }
                    
                    // 创建时间筛选
                    if (selectedTime !== 'all' && item.getAttribute('data-time') !== selectedTime) {
                        showItem = false;
                    }
                    
                    // 地区筛选
                    if (selectedRegion !== 'all' && item.getAttribute('data-region') !== selectedRegion) {
                        showItem = false;
                    }
                    
                    // 搜索筛选
                    if (searchTerm && !item.querySelector('.group-list-title').textContent.toLowerCase().includes(searchTerm) &&
                        !item.querySelector('.group-list-desc').textContent.toLowerCase().includes(searchTerm)) {
                        showItem = false;
                    }
                    
                    // 显示或隐藏群组列表项
                    item.style.display = showItem ? 'flex' : 'none';
                });
                
                showNotification('筛选已应用');
                
                // 在移动设备上筛选后自动收起筛选面板
                if (window.innerWidth <= 768) {
                    filterContent.classList.remove('show');
                    filterChevron.classList.add('fa-chevron-down');
                    filterChevron.classList.remove('fa-chevron-up');
                }
            });
            
            // 重置筛选条件
            resetFiltersBtn.addEventListener('click', function() {
                // 重置所有筛选标签
                document.querySelectorAll('.filter-tag').forEach(tag => {
                    if (tag.getAttribute('data-category') === 'all' || 
                        tag.getAttribute('data-members') === 'all' ||
                        tag.getAttribute('data-activity') === 'all' ||
                        tag.getAttribute('data-time') === 'all' ||
                        tag.getAttribute('data-region') === 'all') {
                        tag.classList.add('active');
                    } else {
                        tag.classList.remove('active');
                    }
                });
                
                // 清空搜索框
                groupSearchInput.value = '';
                
                // 显示所有群组
                document.querySelectorAll('.group-card, .group-list-item').forEach(item => {
                    item.style.display = '';
                });
                
                showNotification('筛选已重置');
            });
            
            // 排序功能
            const sortSelect = document.getElementById('sortSelect');
            sortSelect.addEventListener('change', function() {
                const sortBy = this.value;
                // 在实际应用中，这里会根据选择的排序方式重新排列群组
                // 这里仅做演示
                showNotification(`已按${this.options[this.selectedIndex].text}排序`);
            });
            
            // 加载更多功能
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            const loadMoreSpinner = document.getElementById('loadMoreSpinner');
            
            loadMoreBtn.addEventListener('click', function() {
                // 显示加载动画
                loadMoreSpinner.style.display = 'inline-block';
                loadMoreBtn.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    // 在实际应用中，这里会通过AJAX加载更多群组
                    // 这里仅做演示
                    showNotification('已加载全部群组');
                    
                    // 隐藏加载动画，恢复按钮状态
                    loadMoreSpinner.style.display = 'none';
                    loadMoreBtn.disabled = false;
                    loadMoreBtn.textContent = '没有更多群组';
                    loadMoreBtn.classList.add('disabled');
                }, 1500);
            });
            

        });
    </script>
</body>
</html>

